<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<view class="relative-top">
			<view class="user-info-panel">
				<view class="user-info">
					<image style="width: 110upx; height: 110upx;" mode="aspectFill" :src="image"></image>
					<view class="user-name">
						<view><text class="name">安妮</text><text class="no">NO.执A025123</text></view>
						<view><text class="unit">稽查大队一支队</text></view>
					</view>
					<view class="home-page">
						<text class="home-text">个人主页</text>
						<uni-icons :size="16" color="#F1A72C" type="arrowright" />
					</view>
				</view>
				<view class="sign-panel">
					<text class="sign-label">已连续签到<text class="day">3</text>天</text>
					<text class="sign-btn">签到</text>
				</view>
			</view>
			<view class="operation-panel">
				<view class="operation-item">
					<view class="item-icon icon1"><text class="wait-num">12</text></view>
					<view><text class="label">我的消息</text></view>
				</view>
				<view class="operation-item">
					<view class="item-icon icon2"><text class="wait-num">12</text></view>
					<view><text class="label">待处理</text></view>
				</view>
				<view class="operation-item">
					<view class="item-icon icon3"><text class="wait-num">12</text></view>
					<view><text class="label">进行中</text></view>
				</view>
				<view class="operation-item">
					<view class="item-icon icon4"><text class="wait-num">12</text></view>
					<view><text class="label">已完成</text></view>
				</view>
			</view>
			<view class="list-panel">
				<uni-list style="">
					<uni-list-item class="list-menu-item" title="部门清单" thumb="/static/my/menu_icon1.png" thumbSize="medium" clickable showArrow ></uni-list-item>
					<uni-list-item class="list-menu-item" title="我的清单" thumb="/static/my/menu_icon2.png" thumbSize="medium" clickable showArrow ></uni-list-item>
					<uni-list-item class="list-menu-item" title="我的催办" thumb="/static/my/menu_icon3.png" thumbSize="medium" clickable showArrow ></uni-list-item>
					<uni-list-item class="list-menu-item" title="我的督办" thumb="/static/my/menu_icon4.png" thumbSize="medium" clickable showArrow ></uni-list-item>
					
				</uni-list>
			</view>
			<view class="list-panel">
				<uni-list style="">
					<uni-list-item class="list-menu-item" title="版本更新" thumb="/static/my/menu_icon5.png" thumbSize="medium" clickable showArrow ></uni-list-item>
					<uni-list-item class="list-menu-item" title="设置" thumb="/static/my/menu_icon6.png" thumbSize="medium" clickable showArrow ></uni-list-item>
					<uni-list-item class="list-menu-item" title="建议反馈" thumb="/static/my/menu_icon7.png" thumbSize="medium" clickable showArrow ></uni-list-item>
				</uni-list>
			</view>
			<button style="margin: 30rpx 0rpx 0 0rpx;font-size: 28upx;" type="warn" @click="logout">退出登录</button>
		</view>
		
		<cmd-update :app="app" />
	</view>
</template>

<script>
	import hxNavbar from "@/components/hx-navbar/hx-navbar"
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import cmdUpdate from '@/components/cmd-update/cmd-update.vue';
	import image from '../../static/my/user.png'
	export default {
		components: {
			hxNavbar,
			uniList,
			uniListItem,
			cmdUpdate
		},
		data() {
			return {
				image,
				userName: global.$userName,
				currentWarehouseId: null,
				warehouseList: [],
				app: null,
				config:{
					back: false,
					title: '',
					color: '#ffffff',
					backgroundImg: '/static/index/header_bg.png',
					height: 135
				}
			}
		},
		onShow() {
		},
		methods: {
			changePwd() {
				uni.navigateTo({
					url: '/pages/changePwd/index'
				});
			},
			update() {
				this.$update.updateApp(true).then(downloadPath => {
					this.app = {
						downloadPath
					}
				});
			},
			logout() {
				this.$storage.removeTenantId();
				this.$storage.removeUserId();
				global.$userName = null;
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>
<style lang="scss" >
	.uni-list-item__icon-img,
	.uni-list-item__icon-img[data-v-1093b690]{
		width: 46upx !important;
	}
	.list-menu-item{
		.uni-list-item__icon-img,
		.uni-list-item__icon-img[data-v-1093b690]{
			width: 46upx !important;
		}
	}
</style>
<style lang="scss" scoped>
	.relative-top{
		position: relative;
		z-index: 110;
		top: -170upx;
		width: calc(100% - 40upx);
		margin: 0 auto;
	}
	.list-panel{
		margin-top: 20upx;
	}
	.operation-panel{
		margin-top: 20upx;
		background-color: #fff;
		border-radius: 7px;
		padding: 30upx;
		display: flex;
		justify-content: space-around;
		.label{font-size: 26upx;color: #343434;}
		.operation-item{
			width: 110upx;
			text-align: center;
			.item-icon{
				width: 110upx;
				height: 80upx;
				position: relative;
				&.icon1{background: url(../../static/my/icon1.png) no-repeat center center;background-size: 67upx 67upx;}
				&.icon2{background: url(../../static/my/icon2.png) no-repeat center center;background-size: 67upx 67upx;}
				&.icon3{background: url(../../static/my/icon3.png) no-repeat center center;background-size: 67upx 67upx;}
				&.icon4{background: url(../../static/my/icon4.png) no-repeat center center;background-size: 67upx 67upx;}
				.wait-num{
					position: absolute;
					top: 0;
					right: -15upx;
					display: inline-block;
					background-color: #F2553C;
					width: 60upx;
					height: 30upx;
					line-height: 30upx;
					border-radius: 16upx 16upx 16upx 0upx;
					color: #fff;
					font-size: 24upx;
					text-align: center;
				}
			}
			
		}
		
	}
	.user-info-panel{
		border-radius: 7px;
		background-color: #fff;
		padding: 10upx 0upx;
		box-sizing: border-box;
		.sign-panel{
			padding: 15upx 15upx 0 15upx;
			display: flex;
			.sign-label{
				flex: 1;
				background: url(../../static/my/sign.png) no-repeat center left;
				background-size: 50upx 50upx;
				padding-left: 70upx;
				color: #333333;
				font-size: 28upx;
				.day{
					padding: 0 10upx; 
					color: #FCB238;
				}
			}
			.sign-btn{
				width: 150upx;
				height: 45upx;
				line-height: 45upx;
				text-align: center;
				color: #fff;
				background: linear-gradient(90deg, #4B82FB, #52D3FE);
				box-shadow: 0px 2px 8px 0px #22A7F5;
				border-radius: 20upx;
			}
		}
		.user-info{
			height: 136upx;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			border-bottom: 2upx solid #D8D8D8;
			padding: 0upx 15upx;
			.home-text{color: #F1A72C;font-size: 28upx;}
			.user-name{
				flex: 1;
				padding-left: 15upx;
				.name{color: #4D4D4D;font-size: 30upx;margin-right: 10upx;}
				.unit{color: #7E7E7E;font-size: 26upx;}
				.no{
					color: #fff;font-size: 22upx;
					background: linear-gradient(93deg, #8FCAF7, #758DF5);
					border-radius: 0px 15px 15px 0px;
					padding: 0px 10upx;
				}
			}
			.sign-img{
				height: 108upx;
				width: 80upx;
				background: url(../../static/index/sign.png) no-repeat top left;
				background-size: 63upx 63upx;
			}
		}
	}
	
</style>
